<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Through the Looking-Glass</title> 
 
  
    <style type="text/css">
    .largerSize { 
      font-size: 36px; 
    } 

    .narrowSize { 
      font-size: 25px; 
    } 

    .defaultSize { 
      font-size: 12px; 
    } 

    .selected { 
      font-weight: bold; 
      color: red;
    }

    .hover { 
      cursor: pointer; 
      background-color: #afa; 
      border-radius: 6px;
    }
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){

      $('#switcher-large').click(function(event) {
        /* Act on the event */
        console.log("begin to switcher-large");
        $('#chapter-1').removeClass('narrowSize')
        $('#chapter-1').addClass('largerSize');

      });

      $('#switcher-narrow').click(function(event) {
        /* Act on the event */
        console.log("begin to switcher-narrow");
         $('#chapter-1').removeClass('largerSize')
        $('#chapter-1').addClass('narrowSize');

      });

      $('#switcher-default').click(function(event) {
        /* Act on the event */
        console.log("begin to switcher-default");
        $('#chapter-1').removeClass('narrowSize'); 
        $('#chapter-1').removeClass('largerSize'); 

        
      //  $('#chapter-1').addClass('defaultSize');
      });

      $('#switcher button').click(function(event) {
        /* Act on the event */
          $('#switcher button').removeClass('selected');
          $(this).addClass('selected');
      });


      //切换和隐藏内容
      $('#switcher-btn').click(function(event) {
        /* Act on the event */
        $('#chapter-1').fadeToggle('slow');
      });
      

      $('#switcher button').hover(function() {
        $(this).addClass('hover')
      }, function() {
        $(this).removeClass('hover')
      });
    })
    </script>
  </head> 
 
  <body>  
    <div id="switcher" class="switcher"> 
      <h3>Style Switcher</h3> 
      <button id="switcher-default"> 
        Default 
      </button> 
      <button id="switcher-narrow"> 
        Narrow Column 
      </button> 
      <button id="switcher-large"> 
        Large Print 
      </button> 

      <button id="switcher-btn"> 
        Swich Button
      </button> 
    </div>  
    <hr>
    <h1>Through the Looking-Glass</h1> 
    <div class="author">by Lewis Carroll</div> 
    <div class="chapter" id="chapter-1"> 
      <h2 class="chapter-title">1. Looking-Glass House</h2>    
      <p>There was a book lying near Alice on the table, 
        and while she sat watching the White King (for she 
        was still a little anxious about him, and had the 
        ink all ready to throw over him, in case he fainted 
        again), she turned over the leaves, to find some 
        part that she could read, <span class="spoken"> 
        "&mdash; for it's all in some language I don't know," 
        </span> she said to herself.</p> 
      <p>It was like this.</p> 
      <div class="poem"> 
        <h3 class="poem-title">YKCOWREBBAJ</h3> 
        <div class="poem-stanza"> 
          <div>sevot yhtils eht dna ,gillirb sawT'</div> 
          <div>;ebaw eht ni elbmig dna eryg diD</div> 
          <div>,sevogorob eht erew ysmim llA</div> 
          <div>.ebargtuo shtar emom eht dnA</div> 
        </div> 
      </div> 
      <p>She puzzled over this for some time, but at last 
        a bright thought struck her. <span class="spoken"> 
        "Why, it's a Looking-glass book, of course! And if 
        I hold it up to a glass, the words will all go the 
        right way again."</span></p> 
      <p>This was the poem that Alice read.</p> 
      <div class="poem"> 
        <h3 class="poem-title">JABBERWOCKY</h3> 
        <div class="poem-stanza"> 
          <div>'Twas brillig, and the slithy toves</div> 
          <div>Did gyre and gimble in the wabe;</div> 
          <div>All mimsy were the borogoves,</div> 
          <div>And the mome raths outgrabe.</div> 
        </div> 
      </div> 
      </div> 
      <div class="ss"></div>
  </body> 
</html>